<template>
	<view class="container" :class="skinStyle">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="true">
			<view class="tui-order-list">
				<view class="tui-order-item" v-for="(item, index) in productInfo" :key="index" v-if="!item.isDelete == 1">
					<view @tap="result(item)">
						<tui-list-cell :hover="false" :lineLeft="false">
							<view class="tui-goods-title">
								<view>
									订单号：
									<view style="font-size: 20rpx; display: inline-block;">{{ item.orderId }}</view>
								</view>
								<view style="font-size: 24rpx;" class="tui-order-status theme-color" v-html="getStatusLabel(item.customerServiceStatus, item)"></view>
							</view>
						</tui-list-cell>
						<block :key="index">
							<tui-list-cell padding="0">
								<view class="tui-goods-item">
									<image src="../../../static/img/gift.png" class="imgMark" v-if="item.isSample === 1 || item.isSample === 2 || item.isSample === 3"></image>
									<image :src="imgSrc + item.productThumbnailImageUrl" class="tui-goods-img"></image>
									<view class="tui-goods-center">
										<view class="tui-goods-name">{{ item.productName }}</view>
										<view class="tui-goods-attr">{{ item.productSpecificationName }}</view>
									</view>
									<view class="tui-price-right">
										<view v-if="item.isRefundLogisticsCost==1">￥{{ (item.rejectAmount-item.logisticsCost )/ item.productsCount | moneyFormat(item.rejectAmount-item.logisticsCost / item.productsCount) }}</view>
										<view v-else>￥{{ (item.rejectAmount / item.productsCount) | moneyFormat(item.rejectAmount / item.productsCount) }}</view>
										<view>x{{ item.productsCount }}</view>
									</view>
								</view>
							</tui-list-cell>
						</block>
					</view>
					<view class="tui-order-btn">
						<view
							class="tui-btn-ml"
							v-if="
								(item.customerServiceStatus == 1 || item.customerServiceStatus == 2 || item.customerServiceStatus == 14) &&
									item.rejectType != 2 &&
									(item.rejectExpressOrderNum === '' || item.rejectExpressOrderNum == null)
							"
						>
							<tui-button type="black" :plain="true" width="170rpx" height="62rpx" :size="28" shape="circle" @tap="code(item.orderId, item.rejectNo)">
								填写物流单
							</tui-button>
						</view>
						<view class="tui-btn-ml" v-if="item.customerServiceStatus == 1 || item.customerServiceStatus == 2 || item.customerServiceStatus == 14">
							<tui-button type="black" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="detail(item)">修改申请</tui-button>
						</view>
						<view
							class="tui-btn-ml"
							v-if="
								(item.customerServiceStatus == 1 || item.customerServiceStatus == 2 || item.customerServiceStatus == 14) &&
									(item.rejectExpressOrderNum === '' || item.rejectExpressOrderNum == null)
							"
						>
							<tui-button type="primary" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="show(item)">撤销申请</tui-button>
						</view>
						<view class="tui-btn-ml" v-if="item.customerServiceStatus == 10">
							<tui-button type="primary" :plain="true" width="160rpx" height="62rpx" :size="28" shape="circle" @tap="going(item)">钱数去向</tui-button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<tui-modal :show="modalShow" @click="handleClick" @cancel="hide" title="提示" :content="modalContent"></tui-modal>
		<loading v-if="isLoading"></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
import tuiTabs from '@/packageA/components/tui-tabs/tui-tabs';
import tuiButton from '@/components/button/button';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
import tuiListCell from '@/components/list-cell/list-cell';
import tuiSticky from '@/packageA/components/sticky/sticky';
import mixin from '@/utils/mixin.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [mixin, MescrollMixin],
	components: {
		tuiTabs,
		tuiButton,
		tuiLoadmore,
		tuiNomore,
		tuiListCell,
		tuiSticky
	},
	data() {
		return {
			imgSrc: this.$store.state.imgUrl,
			progressFlg: true,
			isLoading: false,
			scrollLeft: 0,
			currentTab: 0,
			tabs: [
				{
					name: '全部'
				},
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '待评价'
				}
			],

			productInfo: [],

			postSaleList: [], //退款、售后列表
			modalShow: false,
			modalContent: '',
			upOption: {
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				textNoMore: '-- 无更多信息 --'
			},
			mescroll: null,
			postSaleMode: ['退款', '售后'],
			cancelPostSale: '1', //'1'撤销申请，'2'表示放弃申请
			currentPostSaleId: '',
			currentVersion: 0,
			searchKey: '',
			cancelRow: '',
			giftList: [],
			realUnload: 0
		};
	},
	onLoad(options) {
		// #ifdef H5
		   this.$wechat.noShare();
		// #endif
		// if (options) {
		// 	this.currentTab = Number(options.tabIndex);
		// 	this.setScrollLeft(this.currentTab);
		// } else {
		this.currentTab = 0;
		// }
	},
	mounted() {
		// 监听页面刷新
		this.$eventHub.$off('refundRefresh');
		this.$eventHub.$on('refundRefresh', () => {
		  this.mescroll.resetUpScroll()
		});
	},
	filters: {
		moneyFormat(num) {
			var result = parseFloat(num);
			result = Math.round(num * 100) / 100;
			var s_x = result.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0) {
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		},
		mathFloor(num) {
			var num1 = parseFloat(num).toFixed(3);
			var result = Math.floor(num1 * 100) / 100;
			if(result<0.01){
				result=0.01;
			}
			return result;
		}
	},
	methods: {
		statusAllow(id) {
			if (id == 1 || id == 2 || id == 14) {
				return true;
			} else {
				return false;
			}
		},
		upCallback(page) {
			const params = {
				pageSize: page.size,
				current: page.num
			};

			this.$http
				.getReturnOrderList(params)
				.then(res => {
					this.realUnload = true;
					if (res.status == 0) {
						this.progressFlg = false;
						let dataTemp = [];
						dataTemp = res.data.records;
						this.mescroll.endSuccess(dataTemp.length);
						if (page.num === 1) {
							// 如果是第一页需手动制空列表
							this.productInfo = [];
							this.giftList = [];
						}

						// dataTemp.forEach((item, index) => {
						// 	if (!this.giftList.includes(item.orderId)) {
						// 		for (let i = 0; i < item.giftList.length; i += 1) {
						// 			for (let j = 0; j < dataTemp.length; j += 1) {
						// 				let gift = JSON.parse(JSON.stringify(item.giftList[i]));
						// 				if (dataTemp[j].orderId == item.orderId && dataTemp[j].isSample !== 1) {
						// 					gift.customerServiceStatus = dataTemp[j].customerServiceStatus;
						// 					gift.rejectExpressOrderNum = dataTemp[j].rejectExpressOrderNum;
						// 					gift.rejectType = dataTemp[j].rejectType;
						// 					gift.refundReason = dataTemp[j].refundReason;
						// 					gift.rejectAmount = dataTemp[j].rejectAmount;
						// 					gift.refundText = dataTemp[j].refundText;
						// 					gift.rejectEvidencePath1 = dataTemp[j].rejectEvidencePath1;
						// 					gift.rejectEvidencePath2 = dataTemp[j].rejectEvidencePath2;
						// 					gift.rejectEvidencePath3 = dataTemp[j].rejectEvidencePath3;
						// 					gift.productPrice = 0.0;
						// 					gift.isSample = 1;
						// 					dataTemp.splice(j + 1, 0, gift);
						// 				}
						// 			}
						// 		}
						// 		this.giftList.push(item.orderId);
						// 	}
						// });
						this.productInfo = this.productInfo.concat(dataTemp);
					}
				})
				.catch(() => {
					this.mescroll.endErr();
				});
		},
		getStatusLabel(id, item) {
			let flag = true;
			if (item.rejectExpressOrderNum === '' || item.rejectExpressOrderNum == null) {
				flag = false;
			}
			
			switch (id) {
				case 1:
					return '申请退款，待商家处理';
				case 2:
					if (flag) {
						return '申请退货退款，待商家处理';
					} else {
						return '申请退货退款，待买家发货';
					}
				case 3:
					return '同意退款，退款中';
				case 4:
					return '驳回退款，待买家处理';
				case 5:
					return '同意退货退款，待买家发货';
				case 6:
					return '买家逾期未处理，退款失败';
				case 7:
					return '商家处理中';
				case 8:
					return '商家同意退款，退款中';
				case 9:
					if(item.rejectType==1||item.rejectType==2){
						return '商家拒绝退款，售后关闭';
					}else if(item.rejectType==3){
						return '商家拒绝换货，售后关闭';
					}
				case 10:
					return '退款成功';
				case 11:
					return '买家撤销';
				case 12:
					return '买家逾期，超过有效期';
				case 14:
					if (flag) {
						return '申请换货，待商家处理';
					} else {
						return '申请换货，待买家发货';
					}
				case 15:
					return '换货成功';
				default:
					return '';
			}
		},

		show(item) {
			this.cancelRow = item;
			this.modalShow = true;
			this.modalContent = '您确定要撤销申请吗？';
		},
		hide() {
			this.modalShow = false;
		},
		handleClick(e) {
			//撤销申请，放弃申请
			let index = e.index;

			//撤销申请，放弃申请
			if (index == 1) {
				let params = {
					orderId:this.cancelRow.orderId,
					rejectNo:this.cancelRow.rejectNo,
					rejectType:this.cancelRow.rejectType,
				};
				this.isLoading = true;
				var that = this
				this.$http.cancelReject(params).then(res => {
					if (res.status == 0) {
						uni.showToast({
							title: '撤销成功!',
							icon: 'none',
						});
						// deleteItem.forEach((item, index) => {
						// 	item.isDelete = 1;
						// });
						this.mescroll.resetUpScroll()
						that.$eventHub.$emit('orderRefresh');
					}
					this.isLoading = false;
				});
			}
			this.hide();
		},
		result(item) {
			if (item.customerServiceStatus !== 1 && item.customerServiceStatus !== 2 && item.customerServiceStatus !== 14) {
				return;
			}
			let rejectEditInfo = [];
			
			let flag = false;
			if (item.rejectExpressOrderNum === '' || item.rejectExpressOrderNum == null) {
				flag = true;
			}
			const itemStr = {
				rejectType: item.rejectType,
				orderId: item.orderId,
				rejectAmount: item.rejectAmount,
				refundReason: item.refundReason,
				productName: item.productName,
				createTime: item.createTime,
				rejectNo: item.rejectNo,
				flag: flag
			};

			const item2 = JSON.stringify(itemStr);
			let imgArr = [];
			if ((item.rejectEvidencePath1 != null) & (item.rejectEvidencePath1 !== '')) {
				imgArr.push(item.rejectEvidencePath1);
			}
			if ((item.rejectEvidencePath2 != null) & (item.rejectEvidencePath2 !== '')) {
				imgArr.push(item.rejectEvidencePath2);
			}
			if ((item.rejectEvidencePath3 != null) & (item.rejectEvidencePath3 !== '')) {
				imgArr.push(item.rejectEvidencePath3);
			}
			uni.setStorageSync('imgArr', imgArr);
			const rejectId = JSON.stringify(item)
			uni.navigateTo({
				url: '../orderReturn/returnResult?item2=' + item2 + '&type=' + item.rejectType + '&rejectEditInfo=' + rejectId + '&listFlag=1'
			});
		},
		going(item) {
			const strItem = {
				rejectAmount: item.rejectAmount,
				rejectSuccessDate: item.rejectSuccessDate,
				disposeDate: item.disposeDate
			};
			const str = JSON.stringify(strItem);
			uni.navigateTo({
				url: '../orderDetail/refund?item=' + str
			});
		},
		code(id, no) {
			let arr = [];
			this.productInfo.forEach((item, index) => {
				if (item.orderId == id && this.statusAllow(item.customerServiceStatus) && item.rejectNo == no) {
					arr.push(item.rejectId);
				}
			});
			let attStr = JSON.stringify(arr);
			uni.navigateTo({
				url: '../orderReturn/logisticsCode?id=' + attStr + '&productFlag=1&orderId=' + id + '&rejectNo=' + no
			});
		},
		detail(item) {
			let imgArr = [];
			if ((item.rejectEvidencePath1 != null) & (item.rejectEvidencePath1 !== '')) {
				imgArr.push(item.rejectEvidencePath1);
			}
			if ((item.rejectEvidencePath2 != null) & (item.rejectEvidencePath2 !== '')) {
				imgArr.push(item.rejectEvidencePath2);
			}
			if ((item.rejectEvidencePath3 != null) & (item.rejectEvidencePath3 !== '')) {
				imgArr.push(item.rejectEvidencePath3);
			}
			uni.setStorageSync('imgArr', imgArr);
			uni.navigateTo({
				url: '../orderReturn/returnDetail?orderId=' + item.orderId + '&rejectNo=' + item.rejectNo + '&type=' + item.rejectType + '&listFlag=1'
			});
		},

		getWidth: function(id) {
			//得到元素的宽高
			return new Promise((res, rej) => {
				uni.createSelectorQuery()
					.select('#' + id)
					.fields(
						{
							size: true,
							scrollOffset: true
						},
						data => {
							res(data);
						}
					)
					.exec();
			});
		},
		loadMore: function(tabIndex) {
			this.getDateList(tabIndex);
		},
		getDateList: function(tabIndex) {
			for (var i = 0; i < 20; i++) {
				var entity = this.tabs[tabIndex].name + this.swiperDateList[tabIndex].length;
				this.swiperDateList[tabIndex].push(entity);
			}
		}
	}
};
</script>
<style lang="scss">
.imgMark {
	position: absolute;
	width: 100rpx !important;
	height: 100rpx !important;
	top: 0px;
	left: 12rpx;
	z-index: 100;
}
.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}
.imgMark {
	position: absolute;
	width: 100rpx !important;
	height: 100rpx !important;
	top: 0px;
	left: 12rpx;
	z-index: 99999;
}
.progress {
	display: flex;
	top: 0;
	z-index: 9999999;
	width: 100%;
}
.container {
	padding-bottom: env(safe-area-inset-bottom);
	overflow: hidden;
	height: 100%;
	width: 100%;
}
/deep/ .uni-scroll-view::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
}
scroll-view [style*='overflow']::-webkit-scrollbar {
	display: none;
}
.top-tabs-view {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 9999;
	box-shadow: 0 0 4rpx #e5e5e5;
	white-space: nowrap;
	height: 90rpx;
	position: fixed;
	left: 0;
	background: #fff;
	.tabs-item-wrap {
		display: inline-block;
		white-space: nowrap;
		height: 90rpx;
		.tabs-item {
			margin-left: 38rpx;
			margin-right: 35rpx;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.tabs-item-txt {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
			.tabs-item-bottom {
				position: absolute;
				bottom: 0rpx;
				width: 120%;
				height: 4rpx;
			}
		}
		.tabs-item-act {
			.tabs-item-txt {
				//color:  $themeColor;
			}
			.tabs-item-bottom {
				//background:  $themeColor;
			}
		}
	}
}

.swiper-box-list {
	flex: 1;
	width: 100%;
	height: auto;
}
.swiper-one-list {
	height: 100%;
	width: 100%;
}

.swiper-one-list .swiper-list-entity {
	width: 100%;

	height: 112upx;

	text-align: center;

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	justify-content: center;
}
.search-header-box {
	width: 100%;
	background: #fff;
	position: fixed;
	z-index: 99998;
	left: 0;
	top: 0;
	margin-top: 91rpx;
}
.search-header {
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx;
	background: #fff;
	// margin-bottom: 20rpx;
}
.search-searchbox {
	flex: 1;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	background: $borderColor;
	padding: 6rpx 20rpx;
	box-sizing: border-box;
	color: #999;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.search-input {
	text-align: left !important;
	margin-left: 12rpx;
	width: 100% !important;
	background-color: $borderColor !important;
	.uni-input-input {
		width: 100%;
	}
}
.search-text {
	font-size: 32rpx;
	color: #444;
	margin: 0 20rpx 0 30rpx;
	color: $red;
}
.search-search-text {
	padding-left: 16rpx;
}
.search-search-key {
	max-width: 80%;
	height: 100%;
	padding: 0 16rpx;
	margin-left: 12rpx;
	display: flex;
	align-items: center;
	border-radius: 15px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}
.search-key-text {
	box-sizing: border-box;
	padding-right: 12rpx;
	font-size: 12px;
	line-height: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-order-item {
	border-top: 16rpx solid #f5f5f5;
	overflow: hidden;
	position: relative;
	.red {
		color: $red;
	}
}
.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-order-status {
	color: #888;
	font-size: 26rpx;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
	image {
		border: 2rpx solid $borderColor;
		border-radius: 8rpx;
	}
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	line-height: 32rpx;
	padding-top: 20rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: right;
	font-size: 24rpx;
	color: #888888;
	line-height: 30rpx;
	padding-top: 20rpx;
}

.tui-color-red {
	color: #e41f19;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
	font-weight: 500;
}

.tui-order-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	box-sizing: border-box;
}

.tui-btn-ml {
	margin-left: 20rpx;
}
.b-bottom-none {
	.tui-list-cell::after {
		border-bottom: none;
	}
}
</style>
